<template>
  <div class="cart-detail">
      <!-- 商品列表 -->
    <div class="content">
      <van-checkbox-group v-model="result" @change="oneChose">
        <div v-for="(i) in goodsAll" :key="i.id">
          <FoodAdd :item="i"  :isCheck="true" :NumChange="onChange" v-show="i.num"/>
        </div>
      </van-checkbox-group>
    </div>
    <!-- 结算 -->
    <van-submit-bar 
    :price="totalPrice" 
    button-text="提交订单" 
    @submit="onSubmit" 
    class="submit_all" 
    button-color="#ffc400" 
    v-if="isDelete">
    <van-checkbox v-model="checked" checked-color="#ffc400" @click="chooseAll">全选</van-checkbox>
    </van-submit-bar>

    <!-- 删除 -->
    <div class="buy" v-else>
        <div class="left">
              <van-checkbox v-model="checked" checked-color="#ffc400" @click="chooseAll">全选</van-checkbox>
        </div>
        <div class="delete" @click="deleteAll">
            删除
        </div>
    </div>
  </div>
</template>

<script>
import FoodAdd from '../common/FoodAdd.vue'
import { computed, onMounted, reactive, toRefs,} from '@vue/runtime-core';
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import { Toast } from 'vant';
import emitter from '../../assets/js/evenbus'
export default {
  name:'CartDetail',
  components:{
      FoodAdd
  },
  setup(){
   const store = useStore();
   const router = useRouter();
   let data = reactive({
       result:[],
       checked:true,
       isDelete:true
   })
    //  全局事件总线
    emitter.on('editClick',()=>{
           data.isDelete = !data.isDelete
             store.state.edit = false;
    })
    // 删除商品
  const deleteAll=()=>{
      if(data.result.length){
          store.commit('DELETE_GOOD',update('delete'))
          if(store.state.cartList.length==0){
                 store.state.edit = true;
          }
      }else{
          Toast('请选择您要删除的商品(*^▽^*)')
      }
      
  }
    // 商品数组
   const goodsAll =computed(()=>{
       return store.state.cartList;
   }) 
    //    单选
    const oneChose=(i)=>{
        if(i.length===store.state.cartList.length){
            data.checked = true
        }else{
            data.checked = false
            // store.state.cartList.map(item=>{
            //     item.num = 0
            // })
        }
        data.result = i;
    }
    //  计算总价格
    const totalPrice =computed(()=>{
        return store.state.cartList.filter(item=>{ return data.result.includes(item.id)}).reduce((pre,item)=>{
            return pre + item.num *item.price *100
        },0)
    })
    // 全选或者取消全选
    const chooseAll = ()=>{
        console.log(data.result.length,'------',store.state.cartList.length);
    if(data.result.length==store.state.cartList.length){
           data.result = []
    }else{
         init();
    }
    }
    // 更新数据
    const update=(type)=>{
        return store.state.cartList.filter(item=>{ 
            return type=='delete'? !data.result.includes(item.id):data.result.includes(item.id)}
            )
    }
    // 提交订单
   const onSubmit=()=>{
       if(data.result.length!==0){
           store.commit('PAY',update())
           router.push({
               path:'/neworder',
               query:{
                   list:data.result
               }
           })
       }else{
           Toast.fail('请选择要结算的商品')
           return ;
       }
   }
   const onChange =(v,d)=>{
        store.state.cartList.forEach(item=>{
            if(item.id==d.name){
                item.num = v;
            }
        })
   }   
    //    初始化
    const init = ()=>{
        data.result = store.state.cartList.map(item=>{
            if(item.num!==0){
                return item.id
            }
        })
   }
    onMounted(()=>{
        init()
    })
   return {
       ...toRefs(data),
       onChange,
       onSubmit,
       oneChose,
       init,
       chooseAll,
       deleteAll,
       totalPrice,
       goodsAll,
   }
  }
}
</script>

<style scoped lang="less">
.cart-detail{
   font-size: 14px;
   padding: 20px 20px 55px;
   .content{
       padding: 10px;
       background-color: #fff;
       border-radius: 10px;
   }
   .submit_all{
       position: absolute;
       left: 0;
       right: 0;
       bottom: 50px;
   }
  .buy {
    position: fixed;
    bottom: 50px;
    right: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    height: 50px;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    .left {
      display: flex;
      align-items: center;
    }
    .delete {
      color: #fff;
      background-color: #ffc400;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      width: 110px;
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>